<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表相关样式</title>
</head>
<body>
  <style>
    /* 文本样式 */
    span {
      font-family: 'Times New Roman', Times, serif;
      font-size: smaller;
    }

    /* 文本尺寸 */
    ul,
    ol,
    dl,
    p {
      font-size: 1.1rem;
    }

    /* 列表行高样式 */
    li,
    dd,
    dt {
      line-height: 1.5; /* 为该无序列表项和有序列表项提供基于其字体大小 1.5 倍的行高 */
    }

    /* 无序列表样式 */
    ul {
      list-style: inside none "\1F601";
    }
  </style>
  <h4>无序列表</h4>
  <p>作者最喜欢的编程语言（不区分前后顺序）, 列表行内。</p>
  <ul class="wuxu">
    <li>C</li>
    <li>Python</li>
    <li>Go</li>
    <li>Java</li>
    <li>Powershell</li>
    <li>Shell</li>
  </ul>
  <hr>
  <h4>有序列表</h4>
  <p>作者最喜欢的食物（区分前后顺序）</p>
  <!-- start 属性允许你从 1 以外的数字开始计数。 -->
  <!-- reversed 属性将使列表反向计数。 -->
  <!-- value 属性允许设置列表项指定数值。 -->
  <ol start="4" reversed>
    <li>面条|noodles</li>
    <li>面包|bread</li>
    <li value="0">鱼|fish</li>
    <li>鸡肉|chicken</li>
  </ol>

  <hr>

  <h4>定义列表项目与描述，通常用于展示词汇表或者元数据。</h4>
  <p>成分描述清单</p>
  <dl>
    <dt>Hummus</dt>
    <dd>
      一种浓蘸料/酱汁，通常由鹰嘴豆与芝麻酱、柠檬汁、盐、大蒜和其他配料混合而成。<br/>
      <span>A thick dip/sauce generally made from chick peas blended with tahini, lemon
      juice, salt, garlic, and other ingredients.</span>
    </dd>
    <dt>Pita</dt>
    <dd><span>A soft, slightly leavened flatbread.</span></dd>
    <dt>Halloumi</dt>
    <dd>
    <span>A semi-hard, unripened, brined cheese with a higher-than-usual melting
      point, usually made from goat/sheep milk.</span>
    </dd>
    <dt>Green salad</dt>
    <dd><span>That green healthy stuff that many of us just use to garnish kebabs.</span></dd>
  </dl>

</body>
</html>